<template>
  <van-uploader
    :after-read="afterRead"
    :before-delete="beforeDelete"
    v-model="fileList"
    :max-count="maxCount"
    :multiple="multiple"
    @oversize="oversize"
  >
    <slot name="default" />
  </van-uploader>
</template>

<script>
import { uploadImg } from "@/api/upload";

import { imgPreview } from "@/utils/utils.js";

export default {
  name: "UploaderImg",
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    maxCount: {
      type: Number,
      default: 1,
    },
    ocrFun: {
      type: Function,
      default: null,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    afterRead(file) {
      file.status = "uploading";
      file.message = "上传中...";
      imgPreview(file.file, (params) => {
        if (!params) {
          file.status = "failed";
          file.message = "压缩本地照片失败";
          this.fileList = [];
        } else {
          console.log(file.status, "file.status");
          file.status = "uploading";
          file.message = "上传中...";
          uploadImg(params)
            .then((res) => {
              if (res.code == 200) {
                const imgUrl = res.data.link;
                if (this.multiple) {
                  const list = this.value;
                  list.push({
                    url: imgUrl,
                  });
                  this.$emit("change", list);
                  this.$emit(
                    "uploadAfter",
                    list.map((item) => item.url)
                  );
                } else {
                  this.$emit("change", [{ url: imgUrl }]);
                  this.$emit("uploadAfter", imgUrl);
                }
                // 给ocr识别腾地方
                if (this.ocrFun) {
                  this.ocrFun(imgUrl).then(() => {
                    file.status = "done";
                  });
                } else {
                  file.status = "done";
                }
              }
            })
            .catch((err) => {
              file.status = "failed";
              file.message = "上传失败";
              console.log(err, "err");
              this.$toast({
                message: "上传失败, 请重新上传",
                duration: 2000,
              });
            });
        }
      });
    },
    beforeDelete(file) {
      this.$dialog
        .alert({
          title: "移除图片",
          message: "是否确定移除该图片？",
          closeOnClickOverlay: true,
          confirmButtonColor: "#FFB72F",
        })
        .then(() => {
          if (this.multiple) {
            const list = this.value.filter((item) => item.url !== file.url);
            this.$emit("change", list);
            this.$emit(
              "beforeDelete",
              list.map((item) => item.url)
            );
          } else {
            this.fileList = [];
            this.$emit("change", []);
            this.$emit("beforeDelete", []);
          }
        });
    },
    oversize() {
      this.$toast("图片过大无法上传\n请上传10MB以内的图片！");
    },
  },
  mounted() {
    this.fileList = this.value.filter((item) => item.url);
  },
  watch: {
    value() {
      this.fileList = this.value.filter((item) => item.url);
    },
  },
};
</script>
<style scoped lang="less">
/deep/.van-dialog__content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 57px 0;
}
// /deep/.van-uploader {
//   width: 334px;
//   height: 224px;
// }
// /deep/.van-uploader__wrapper {
//   width: 334px;
//   height: 224px;
// }
/deep/.van-uploader__preview-image {
  width: 325px;
  height: 215px;
}
// /deep/.van-uploader__preview {
//   width: 334px;
//   height: 224px;
// }
img {
  width: 334px;
  height: 224px;
}
/deep/ .van-uploader__preview-delete {
  width: 42px;
  height: 42px;
}
/deep/ .van-uploader__preview-delete-icon {
  font-size: 48px;
}
</style>
